<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/coupons.css" />

    <style>
        body {
            background: #fff
        }

        .aui-tab-item.aui-active {
            font-weight: bold;
            /*border-bottom: .1rem solid #E94B41;*/
            border-bottom: none;
            color: #333;
            font-size: .7rem;
        }

        .red-line {
            height: .1rem;
            width: 2.1rem;
            background: #E93324;
            margin: 0 auto;
        }

        .tap-block-title {
            height: 2.1rem;
            color: #333
        }

        .tap-grey-title {
            height: 2.1rem;
            color: #999
        }

        .line-clamp-two {
            -webkit-line-clamp: 2;
        }
    </style>
</head>

<body>
    <div id="app">
        <section class="aui-content">
            <div class="aui-tab font-14">
                <div class="aui-tab-item" v-for='item in taps' tapmode @click='tapSelected(item.tapId)' :data-tapId='item.tapId'>
                    <div :class="[tapIndex == item.tapId ?'tap-block-title':'tap-grey-title']">{{item.tap}}</div>
                    <div :class="[ tapIndex == item.tapId ? 'red-line' : '' ]">
                    </div>
                </div>
            </div>
        </section>
        <section>
            <!-- 未使用 -->
            <div class="coupons-item font-12 " :class="[tapIndex == 0 ?'red-border':'grey-border']" v-for='(item,index) in couponsItems'>
                <div class="flex-justify-between " :class="[tapIndex == 0 ?'pink-bg':'grey-bg']">
                    <div class="flex-align-center">
                        <div class="price flex-center height-70">
                            <div class="price-center " :class="[tapIndex == 0 ?'red-text':'']">
                                <span class="money-icon">¥</span>
                                <span class="font-30">{{item.money}}</span></div>
                        </div>
                        <div class="">
                            <div class="">
                                每满299减30券
                            </div>
                            <div class="time">
                                {{item.time}}
                            </div>
                        </div>
                    </div>

                    <button class="red-btn font-12" v-if='tapIndex == 0'>去使用</button>
                    <img class='zhang' v-if='tapIndex == 1' src="../image/person/used-zhang.png" alt="">
                    <img class='zhang' v-if='tapIndex == 2' src="../image/person/shixiao-zhang.png" alt="">

                </div>
                <div class="text-content flex-justify-between">
                    <div class="ellipsis" :class="[shrinkIndex == item.id?(isFolded?'line-clamp-two':'line-clamp-one'):'line-clamp-one']">
                        全场通用·新品除外；限时购、特价等特惠商品，处处处处
                    </div>
                    <img class='zhankai-img' tapmode @click="shrink(item.id)" :data-id='item.id' :src="[isFolded && shrinkIndex == item.id?'../image/person/zhankai-up.png':'../image/person/zhankai-down.png']" alt="">
                    <!-- <img class='zhankai-img' tapmode @click="shrink(index)" :data-index='index' :src="[isFolded && shrinkIndex == index?'../image/person/zhankai-up.png':'../image/person/zhankai-down.png']" alt=""> -->

                </div>
            </div>
        </section>

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript ">
    var vm = new Vue({
        el: '#app',
        data: {
            taps: [{
                tap: '未使用',
                tapId: 0
            }, {
                tap: '已使用',
                tapId: 1
            }, {
                tap: '已失效',
                tapId: 2
            }],
            couponsItems: [{
                money: 100,
                time: '2019.11.10-2019.12.10',
                id: 0
            }, {
                money: 20,
                time: '2019.12.10-2019.12.10',
                id: 1
            }, {
                money: 30,
                time: '2019.12.10-2019.12.10',
                id: 2
            }],
            tapIndex: 0,
            shrinkIndex: undefined,
            isFolded: true
        },

        methods: {
            tapSelected: function(tapId) {
                this.tapIndex = tapId;
            },
            shrink: function(id) {
                this.shrinkIndex = id;
                this.isFolded = !this.isFolded;
            },
        }
    });

    apiready = function() {

    }
</script>


</html>
